<template>
  <div class="bg-white rounded-lg shadow-sm p-8">
    <div class="mb-8">
      <h1 class="text-2xl font-bold text-gray-900 mb-2">接单设置</h1>
      <p class="text-gray-500">设置您的接单偏好和服务范围</p>
    </div>

    <div class="mb-8">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">接单状态</h2>
      <div class="flex gap-8">
        <label class="flex items-center gap-3 cursor-pointer">
          <input type="checkbox" v-model="online" class="sr-only">
          <span class="toggle-slider" :class="{'on': online}"></span>
          <span class="text-gray-700">在线接单</span>
        </label>
        <label class="flex items-center gap-3 cursor-pointer">
          <input type="checkbox" v-model="offline" class="sr-only">
          <span class="toggle-slider" :class="{'on': offline}"></span>
          <span class="text-gray-700">离线休息</span>
        </label>
      </div>
    </div>

    <div class="mb-8">
      <h2 class="text-lg font-semibold text-gray-900 mb-2">服务范围</h2>
      <p class="text-sm text-gray-500 mb-4">与个人信息中的“服务范围”保持一致，例如：一期宿舍、二期宿舍、教学楼附近等</p>
      <input
        v-model="serviceRange"
        type="text"
        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        placeholder="例如：一期宿舍+教学楼"
      />
    </div>

    <div class="mb-8">
      <h2 class="text-lg font-semibold text-gray-900 mb-2">接单时间</h2>
      <p class="text-sm text-gray-500 mb-4">与个人信息中的“常接单时间”保持一致，例如：12:00-14:00, 18:00-22:00</p>
      <input
        v-model="serviceTime"
        type="text"
        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        placeholder="例如：12:00-14:00, 18:00-22:00"
      />
    </div>

    <div class="mb-8">
      <h2 class="text-lg font-semibold text-gray-900 mb-2">接单偏好</h2>
      <div class="space-y-4">
        <div class="flex items-center justify-between py-3"><span class="text-gray-700">新订单通知</span><input type="checkbox" checked class="w-5 h-5"></div>
      </div>
    </div>

    <div class="flex justify-end gap-4 pt-6 border-t border-gray-200">
      <button @click="resetSettings" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">重置</button>
      <button @click="saveSettings" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">保存设置</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'CourierSettings',
  data() {
    return {
      online: true,
      offline: false,
      serviceRange: '',
      serviceTime: '',
      originalRange: '',
      originalTime: ''
    }
  },
  watch: {
    online(v) { if (v) this.offline = false },
    offline(v) { if (v) this.online = false }
  },
  methods: {
    async loadSettings() {
      const userId = localStorage.getItem('userId')
      if (!userId) return
      try {
        const { data } = await axios.get(`/api/users/profile/${userId}`)
        const root = (data && data.data) || {}
        const cu = root.courier_user || {}
        this.serviceRange = cu.service_range || ''
        this.serviceTime = cu.service_time || ''
        this.originalRange = this.serviceRange
        this.originalTime = this.serviceTime
      } catch (e) {
        console.error('加载接单设置失败', e)
      }
    },
    resetSettings() {
      this.serviceRange = this.originalRange
      this.serviceTime = this.originalTime
    },
    async saveSettings() {
      const userId = localStorage.getItem('userId')
      if (!userId) {
        alert('请先登录')
        return
      }
      try {
        await axios.put(`/api/users/profile/${userId}`, {
          service_range: this.serviceRange || undefined,
          service_time: this.serviceTime || undefined
        })
        this.originalRange = this.serviceRange
        this.originalTime = this.serviceTime
        alert('接单设置已保存')
      } catch (e) {
        console.error('保存接单设置失败', e)
        alert('保存失败，请稍后再试')
      }
    }
  },
  mounted() {
    this.loadSettings()
  }
}
</script>

<style scoped>
.toggle-slider { position: relative; display: inline-block; width: 44px; height: 24px; background-color: #e5e7eb; border-radius: 24px; transition: .3s; }
.toggle-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .3s; }
.toggle-slider.on { background: #3b82f6; }
.toggle-slider.on::before { transform: translateX(20px); }
</style>
